﻿@page "/customDay"

<style>
    .daterangepicker .drp-calendar {
        max-width: 298px;
    }

    .daterangepicker .calendar-table td {
        width: 40px;
    }
</style>

<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
    <a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/jdtcn/BlazorDateRangePicker/blob/master/Demo.Shared/Pages/CustomDay.razor"
       title="View this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
    <h3>Custom day template</h3>
</div>

<p>
    Override
    <code class="language-plaintext highlighter-rouge">DayTemplate</code>
    template to display additional information in the day cells.
</p>

<Example Text="@ExampleText">
    <DateRangePicker>
        <DayTemplate Context="dt">
            D-<b>@(dt.Day.Day)</b>
            <br />
            $@(dt.Day.Day + dt.Day.Month * 10)
        </DayTemplate>
    </DateRangePicker>
</Example>

@code {
    private string ExampleText =
        "<DateRangePicker>\n" +
        "   <DayTemplate Context=\"dt\">\n" +
        "       D-<b>@(dt.Day.Day)</b>\n" +
        "       <br />\n" +
        "       $@(dt.Day.Day + dt.Day.Month * 10)\n" +
        "   </DayTemplate>\n" +
        "</DateRangePicker>";
}